<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css-3d旋转</title>
		<!--<link rel="stylesheet" href="css/index.css" />-->
		
		<style>
			[title] {color: #ffffff;}
		</style>
			</head>
			<body>
			<p title="attrselector">相信光，追随光</p>
			<p title="attrselector">成为光，散发光</p>
			<p title="attrselector">——迪迦——</p>
				<!--/*外层最大容器*/-->
		<div class="wrap">
	<!--	/*包裹所有元素的容器*/-->
		<div class="cube">
			<!--前面图片 -->
			<!--<div class="out_front">
				<img src="img/7.jpg"  class="pic"/>
			</div>
			<!--后面图片 -->
			<!--<div class="out_back">-->
				<!--<img src="img/8.jpg"  class="pic"/>
			</div>-->
			<!--左图片 -->
			<!--<div class="out_left">
				<img src="img/9.jpg"  class="pic"/>
			</div>
			<div class="out_right">
				<img src="img/10.jpg"  class="pic"/>
			</div>
			<div class="out_top">
				<img src="img/11.jpg"  class="pic"/>
			</div>
			<div class="out_bottom">
				<img src="img/12.jpg"  class="pic"/>
			</div>-->-->
			<!--小正方体 --> 
			<span class="in_front">
				<img src="img/1.jpg" class="in_pic" />
			</span>
			<span class="in_back">
			     <img src="img/2.jpg" class="in_pic" />
			</span>
			<span class="in_left">
				<img src="img/3.jpg" class="in_pic" />
			</span>z
			<span class="in_right">
				<img src="img/4.jpg" class="in_pic" />
			</span>
			<span class="in_top">
				<img src="img/5.jpg" class="in_pic" />
			</span>
			<span class="in_bottom">
				<img src="img/6.jpg" class="in_pic" />
			</span>
		</div>
		</div>
		<style>
			html{
	         	background: black;
   				 height: 100%;	
					}
					html{
	background: black;
    height: 100%;	
}
/*包裹所有容器样式*/
.cube{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d; /*设置元素的子元素是位于 3D 空间中还是平面中*/
	transform: rotateX(-30deg) rotateY(-80deg);/*元素按照指定角度旋转*/
	-webkit-animation: rotate 20s infinite;/*动画   无限旋转20秒*/
	animation-timing-function: linear;/*匀速*/
}
@-webkit-keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
/*定义小正方体样式*/
.cube span{
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	background-color: white;
	width: 100px;
	height: 100px;
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
	transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(50px);
}
		</style>
	</body>
</html>
